<style scoped lang="less">
.profile-panel {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 0.5rem;
  padding : 1rem;
  box-sizing: border-box;
  //border-radius: var(--pt-radius-s);
  //box-shadow: 0 2px 8px 0 var(--pt-shadow-light);
  .profile-name {
    font-weight: bold;
    margin: 0 1rem;
    font-size: 2rem;
  }

  .profile-section-title{
    text-align: left;
    width: 100%;
    display: flex;
    margin: 0;

  }

  .profile-meta-list {
    width: 100%;
    display: flex;
    margin: 1rem 0;
    flex-direction: column;
    gap: 1.5rem;
  }

  :deep(.el-button){
    width: 80%;
    border-radius: var(--pt-radius-s);
    margin:  3.5rem 0;
  }
}
</style>


<template>
  <div class="profile-panel">

    <avatar size="6rem"/>

    <span class="profile-name">
      {{ testData.userName }}
    </span>

    <h3 class="profile-section-title">
      基本信息
    </h3>

    <div class="profile-meta-list">
      <user-meta-row icon="phone" :msg="testData.userPhoneNum"/>
      <user-meta-row icon="time" :msg="testData.createAt"/>
      <user-meta-row icon="time" :msg="testData.createAt"/>
      <user-meta-row icon="time" :msg="testData.createAt"/>
    </div>

    <el-button @click="ElMessage.success('编辑成功')" size="large" type="primary">编辑信息</el-button>
  </div>
</template>

<script setup lang="ts">

import Avatar from '@/components/Avatar.vue';
import UserMetaRow from './UserMetaRow.vue';
import {reactive, type Reactive} from 'vue';
import {ElMessage} from "element-plus";


// TODO 获取用户信息通过id

const testData: Reactive<{
  userName: string,
  userPhoneNum: string,
  createAt: string
}> = reactive({
  userName: "nickName",
  userPhoneNum: "15179857708",
  createAt: "2025.01.12"
})


</script>